<template>
    <div class="cinemaDetailPage">
      <detail-header></detail-header>

      <h1 class="cinemaName fontnowarp">{{cinemaInfo.name}}</h1>
      <div class="cinemaDetail">
          <div class="cinema-wrap">
            <div class="service-tag">
              <van-tag v-for='item in cinemaInfo.services' plain type="primary" color="#ffb232" :key="item.name">{{item.name}}</van-tag>
            </div>

          </div>
          <!-- 服务标签弹出层  -->
          <div class="service-info" >
            asdf
          </div>
      </div>

      <div class="addressIphone">

              <div class="addressInfo" @click="toMapPage">
                <div class="oneicon">
                  <van-icon size="25" name="location-o" />
                </div>
                <div class="address fontnowarp">
                  {{cinemaInfo.address}}
                </div>
              </div>
              <div class="oneicon pnoneIcon">
                <a :href='"tel:"+cinemaInfo.phone' style="display: block;">
                  <van-icon size="25" name="phone-o" />
                </a>
              </div>
            </div>

      <!-- 影院电影 -->
      <cinemaFilm :cinemaId="cinemaInfo.cinemaId" :filmPostData='cinemaFileData'></cinemaFilm>
    </div>
</template>

<script>
// import 'vant/lib/index.css'
import { Toast } from 'vant';
import http from '@/util/http'
// minxin 混入 解决tabbar 隐藏显示
import obj from '@/util/mixinObj'
// 顶部导航
import detailHeader from '@/components/detail/DetailHeader'
import cinemaFilm from '@/components/cinemaFilm/CinemaFilm'


export default {
  components: {
    detailHeader,
    cinemaFilm
  },
  mixins: [obj],
  props:['cinemaId'],
  data() {
    return {
      isHidden: true,
      cinemaInfo:{
        name:'未加载',
        address:'未加载',
        services:['未加载'],
      },
      cinemaFileData:[]
    };
  },
  created(){
    this.getCinemaInfo()
  },
  mounted(){
    // console.log(this.cinemaId)
  },
  methods: {
    getCinemaInfo(){
      // https://m.maizuo.com/gateway/?cinemaId=2888&k=9812875
      // 'X-Host': ' mall.film-ticket.cinema.info '

      // https://m.maizuo.com/gateway/?cinemaId=2888&k=9589980
      // 'X-Host': ' mall.film-ticket.film.cinema-show-film '
      
      http({
        url: `/gateway?cinemaId=${this.cinemaId}&k=9812875`,
        headers: {
          'X-Host': ' mall.film-ticket.cinema.info '
        }
      }).then((res) => {
        this.cinemaInfo = res.data.data.cinema    
        // console.log("cinema.info",this.cinemaInfo)    
      }).catch(err=>{

      })

      http({
        url: `/gateway?cinemaId=${this.cinemaId}&k=9589980`,
        headers: {
          'X-Host': ' mall.film-ticket.film.cinema-show-film '
        }
      }).then((res) => {            
          this.cinemaFileData = res.data.data.films   
          // console.log("cinema-show-film",this.cinemaFileData)    
      })

    },
    toMapPage(){
        let gpsAdresss = {}
        gpsAdresss.latitude = this.cinemaInfo.latitude
        gpsAdresss.longitude = this.cinemaInfo.longitude
        console.log(this.cinemaInfo)
        
        // this.$router.push({
        //   name:"map",
        //   params:{
        //     gpsAdresss:JSON.stringify(gpsAdresss)
        //   }
        // })

        // {latitude: 30.680406083145204, longitude: 104.06461967529945}
        // 沃美影城 {latitude: 30.688633885787453, longitude: 104.07880104472437}
         // https://apis.map.qq.com/uri/v1/search?keyword=沃美影城&center=30.688633885787453,104.07880104472437&radius=1000&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77



         window.location.href=`https://apis.map.qq.com/uri/v1/search?keyword=${this.cinemaInfo.name}&center=${this.cinemaInfo.latitude},${this.cinemaInfo.longitude}&radius=1000&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77`
    }
  },
};
</script>

<style lang="scss" scoped>
    .cinemaDetailPage{
        width:100%;
        // height:calc(100vh - 3.2778rem);
        // display:flex;
        // justify-content: center;
        // align-items:center;

        .fontnowarp{

            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .cinemaName{
              position: sticky;
              top: 2.4rem;
              text-align: center;
              font-size: 17px;
              font-weight:500;
              color: #191a1b;
              // width: 100%;
              padding: 0 15px;
              background: #fff;
              height: 44px;
              line-height: 44px;
              z-index: 302;
              margin: 0 0 .5rem;
              padding:1rem 0 0;
          }    

        .cinemaDetail{
          margin-top: 2.8rem;
          position:relative;
              // box-shadow: 0px 2px 20px rgb(0 0 0 / 7%);


           

          .cinema-wrap{
            display:flex;
            justify-content:center;
            align-items: center;
            flex-direction: column;

            .service-tag{
              margin: 0rem 0 1rem;

              .van-tag{
                margin:0 2px;
              }
            }
          }




          .service-info{
            display:none;
            position:absolute;
            top: calc(1rem + 44px);
            left:0;
            z-index:9999;
            background-color:#fff;
            width:100%;
            // height:600px;

          }
        }
    }

              .addressIphone{

            width:100%;
            display:flex;
            justify-content: space-between;
            margin: 0 0 1.5rem;
            position: sticky;
            top: 105px;
            background-color: #fff;
            z-index: 999;


            .addressInfo{
              display:flex;
              justify-content: space-between;
            }

            .oneicon{
              padding:0 10px;
            }
            .address{
              flex:1;
              font-size: 14px;
              font-weight:500;
              color: #191a1b;
              // width: 100%;
              padding: 2px 5px 0;
              width:300px;

            }
            .pnoneIcon{

            }
          }

</style>